<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <title>简单拖放 demo</title>
    <style>
        .component {
            margin: 50px 10px;
            width: 120px;
            height: 100px;
            border: 1px solid black;
            float: left;
            display: inline;
            overflow: hidden;
            -ms-touch-action: none -ms-user-select : none;
        }

        #drop {
            border: 1px solid green;
            height: 130px;
        }

        .ks-dd-drag-over {
            background: #a52a2a;
        }

        .ks-dd-drop-over {
            background: #ffff00;
        }

        #c3.ks-dd-dragging {
            display: none;
        }

        .ks-dd-proxy {
            position: absolute;
            left: -9999px;
            top: -9999px;
        }
    </style>
    <link rel="stylesheet" href="../../css/assets/dpl/base.css"/>
</head>
<body>

<div id="container" class="container">

    <h2>简单拖放 + 回复动画</h2>

    <label>
        <input id='disabled' type="checkbox"/>
        disabled droppable</label>

    <div class="ks-clear">
        <div id="c1" class="component">

            intersect drag
        </div>

        <div id="c2" class="component">

            point drag
        </div>

        <div id="c3" class="component">
            strict drag with proxy
            <img height="100"
                 src="http://img.alimama.cn/adbrand/adboard/picture/2011-09-20/126792650001110920134440.jpg"/>
        </div>
    </div>
    <div id="drop">
        <strong>drop zone</strong>
    </div>

</div>

<script src="/kissy/build/seed-debug.js"></script>
<script src="/kissy/src/package.js"></script>
<script src="/kissy/src/log.js"></script>
<script>

    var S = KISSY;

    KISSY.use("node,util,dd,dd/plugin/proxy", function (S, Node, util, DD, Proxy) {
        alert('ok');

        var DDM = DD.DDM,
                $ = Node.all,
                Draggable = DD.Draggable,
                Droppable = DD.Droppable;

        /**
         * 简单拖放
         */
        var p = new Proxy({
            /**
             * 如何产生替代节点
             * @param drag 当前拖对象
             */
            node: function (drag) {
                var n = $(drag.get("dragNode").clone(true));
                n.attr('id', util.guid("ks-dd-proxy"));
                n.css("opacity", 0.2);
                n.isProxy = 1;
                return n;
            },
            moveOnEnd: 0
        });
        var c1 = new Draggable({
            node: "#c1",
            move: 1,
            //模式，
            // intersect :区域相交就算enter
            // strict : drag 区域完全在 drop 区域内才算
            // point : 鼠标在 drop 区域内
            //默认 point
            mode: Draggable.DropMode.INTERSECT
        });


        var c3 = new Draggable({
            node: "#c3",
            move: 1,
            mode: Draggable.DropMode.STRICT
        });

        c3.plug(p);

        var c2 = new Draggable({
            node: "#c2",
            move: 1
        });

        var drop = new Droppable({
            node: "#drop"
        });

        $('#disabled').on('click', function () {
            drop.set('disabled', this.checked);
        });

        c1.on("dragenter", function (ev) {

            S.log(ev.drag.get("node").attr('id') + " dragenter "
                    + ev.drop.get("node").attr('id'));
        });

        c1.on("dragover", function (ev) {
            S.log(ev.drag.get("node").attr('id') + " dragover "
                    + ev.drop.get("node").attr('id'));
        });

        c1.on("dragexit", function (ev) {
            S.log(ev.drag.get("node").attr('id') + " dragexit "
                    + ev.drop.get("node").attr('id'));
        });

        function onhit(ev) {
            var node = ev.drag.get("dragNode");
            node.css({
                position: "",
                left: "",
                top: ""
            });
            node.css("margin", "5px 10px");
            node.appendTo(ev.drop.get("node"));
            // let dragend fire
            setTimeout(function () {
                ev.drag.destroy();
            }, 0);
        }


        DDM.on("dragdropmiss", function (ev) {
            var node = ev.drag.get("node");
            S.log(node.attr('id') + " dragdropmiss ");
            if (node.isProxy) {
                var dragNode = ev.drag.get("dragNode");
                dragNode.css('visibility', 'hidden');
                node = node.clone(true).insertBefore(node);
                var props = {
                    left: dragNode.offset().left - parseInt(dragNode.css('margin-left')),
                    top: dragNode.offset().top - parseInt(dragNode.css('margin-top'))
                };
                node.animate({
                    to: props,
                    duration: 0.5,
                    complete: function () {
                        node.remove();
                        dragNode.css('visibility', '');
                    }
                })
            } else {
                node.animate({
                    to: {
                        left: 0,
                        top: 0
                    },
                    duration: 0.5,
                    complete: function () {
                        node.css({
                            position: "",
                            left: "",
                            top: ""
                        });
                    }
                })
            }
        });

        drop.on("dropenter", function (ev) {
            S.log(ev.drag.get("node").attr('id') + " dropenter "
                    + ev.drop.get("node").attr('id'));
        });

        drop.on("dropover", function (ev) {
            S.log(ev.drag.get("node").attr('id') + " dropover "
                    + ev.drop.get("node").attr('id'));
        });

        drop.on("dropexit", function (ev) {
            S.log(ev.drag.get("node").attr('id') + " dropexit "
                    + ev.drop.get("node").attr('id'));
        });

        drop.on("drophit", onhit);
    });
</script>
</body>
</html>